// ===============================
// Element Plus Menu 组件样式覆盖
// ===============================

// ===============================
// 1. 基础菜单容器
// ===============================

.menu {
	width: 100%;
	display: flex;
	height: 100% !important;
	overflow: visible;
	box-shadow: transparent;
	background: var(--theme-header-bg);
	justify-content: flex-end; // 菜单项靠右对齐
	border: none;
}

// ===============================
// 2. 菜单项基础样式
// ===============================

// 公共菜单项样式
.menu-item-common {
	background: transparent !important;
	transition: all 0.3s ease;
	padding: 0 12px;
	margin: 0 8px;
	border-radius: 6px;
	position: relative;

	span {
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--theme-header-text-menu);
		transition: color 0.3s ease;
	}

	&:hover {
		background: var(--theme-header-text-menu-hover-bg) !important;
		span {
			color: var(--theme-header-text-menu-hover);
		}
	}

	&:focus {
		outline: none;
		background: var(--theme-header-text-menu-hover-bg) !important;
	}
}

// 子菜单样式
.custom-sub-menu {
	:deep(.el-sub-menu__title) {
		@extend .menu-item-common;
		border-width: 0 !important;
		border-bottom: 0 !important;

		&:hover {
			background: var(--theme-header-text-menu-hover-bg) !important;
			border-bottom: 2px solid var(--theme-header-text-menu-hover) !important;
		}
	}
}

// 菜单项样式
.custom-menu-item {
	@extend .menu-item-common;
	height: auto !important;

	&:hover {
		background: var(--theme-header-text-menu-hover-bg) !important;
		border-bottom: 2px solid var(--theme-header-text-menu-hover) !important;
	}
}

// ===============================
// 3. 菜单状态样式
// ===============================

// 激活状态
.is-active,
.isHighlight {
	span {
		font-weight: bold;
		color: var(--theme-header-text-menu-active) !important;
	}

	.custom-menu-item-title {
		background: var(--theme-header-text-menu-active-bg) !important;
		border-radius: 6px;
	}

	// 子菜单激活状态
	:deep(.el-sub-menu__title) {
		background: var(--theme-header-text-menu-active-bg) !important;
		border-bottom: 2px solid var(--theme-header-text-menu-active) !important;

		span {
			color: var(--theme-header-text-menu-active) !important;
		}

		// 激活状态下的 hover 效果
		&:hover {
			background: var(--theme-header-text-menu-hover-bg) !important;
			border-bottom: 2px solid var(--theme-header-text-menu-hover) !important;

			span {
				color: var(--theme-header-text-menu-hover) !important;
			}
		}
	}

	// 激活状态下的菜单项 hover 效果
	&:hover {
		.custom-menu-item-title {
			background: var(--theme-header-text-menu-hover-bg) !important;

			span:first-child {
				color: var(--theme-header-text-menu-hover) !important;
			}

			span:last-child {
				color: var(--theme-header-text-menu-hover) !important;
			}
		}

		span {
			color: var(--theme-header-text-menu-hover) !important;
		}
	}
}

// Element Plus 激活状态的 hover 覆盖
.el-menu--horizontal {
	.el-menu-item.is-active {
		&:hover {
			background: var(--theme-header-text-menu-hover-bg) !important;
			color: var(--theme-header-text-menu-hover) !important;
			border-bottom: 2px solid var(--theme-header-text-menu-hover) !important;
		}
	}
}

// ===============================
// 4. 特殊菜单项样式
// ===============================

// 双行菜单标题
.custom-menu-item-title {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 8px 12px;
	border-radius: 6px;
	transition: all 0.3s ease;

	span {
		line-height: 20px;
		flex: 1;
		transition: color 0.3s ease;

		&:first-child {
			font-size: 14px;
			font-weight: 600;
			color: var(--theme-header-text-menu);
		}

		&:last-child {
			font-size: 12px;
			color: var(--theme-header-text-muted);
			margin-top: 2px;
		}
	}

	&:hover {
		background: var(--theme-header-text-menu-hover-bg) !important;

		span:first-child,
		span:last-child {
			color: var(--theme-header-text-menu-hover);
		}
	}
}

// ===============================
// 5. Element Plus 全局样式覆盖
// ===============================

// 水平菜单样式
.el-menu--horizontal {
	background: transparent !important;

	.el-menu-item {
		&:focus {
			background: var(--theme-header-text-menu-hover-bg) !important;
		}

		&.is-active {
			background: var(--theme-header-text-menu-active-bg) !important;
			color: var(--theme-header-text-menu-active) !important;
			border-bottom: 2px solid var(--theme-header-text-menu-active) !important;

			&:hover {
				background: var(--theme-header-text-menu-hover-bg) !important;
				color: var(--theme-header-text-menu-hover) !important;
				border-bottom: 2px solid var(--theme-header-text-menu-hover) !important;
			}
		}
	}
}

// 隐藏子菜单箭头图标
.el-sub-menu__icon-arrow {
	display: none !important;
}

// 弹出菜单样式
.el-menu--popup {
	background: var(--theme-header-bg) !important;
	border: 1px solid var(--theme-content-border) !important;
	border-radius: 8px;
	padding: 4px !important;
	margin: 0 !important;
	box-shadow: var(--theme-card-shadow) !important;
	border-radius: 6px;

	.el-menu-item {
		height: auto !important;
		padding: 0 !important;
		margin: 2px 0 !important;
		border-radius: 6px;
		color: var(--theme-content-text) !important;
		transition: all 0.3s ease;

		&:hover {
			background: var(--theme-content-hover) !important;
			color: var(--theme-accent) !important;
		}

		&:focus {
			background: var(--theme-content-hover) !important;
			outline: none;
		}

		span {
			color: inherit !important;
		}
	}

	li {
		padding: 0 !important;
		margin: 0 !important;
	}
}

// 弹出层样式
.el-popper {
	border: 1px solid var(--theme-content-border) !important;
	border-radius: 8px !important;
	box-shadow: var(--theme-card-shadow) !important;

	.el-menu--horizontal {
		border: none !important;
	}
}

// ===============================
// 6. 响应式设计
// ===============================

@media (max-width: 768px) {
	.menu {
		justify-content: center;

		.menu-item-common {
			margin: 0 4px;
			padding: 0 8px;
		}
	}

	.custom-menu-item-title {
		padding: 6px 8px;

		span {
			&:first-child {
				font-size: 13px;
			}

			&:last-child {
				font-size: 11px;
			}
		}
	}
}

// ===============================
// 7. 主题切换动画
// ===============================

.menu,
.menu-item-common,
.custom-sub-menu :deep(.el-sub-menu__title),
.custom-menu-item,
.custom-menu-item-title,
.el-menu--horizontal .el-menu-item,
.el-menu--popup .el-menu-item,
.el-popper,
.custom-menu-item-title span,
.menu-item-common span,
.custom-sub-menu :deep(.el-sub-menu__title) span,
.is-active span,
.isHighlight span {
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease,
		border-bottom-color 0.3s ease,
		box-shadow 0.3s ease,
		font-weight 0.3s ease !important;
}
